<template>
  <div class="work-container">
<!--    <div class="home-container"></div>-->
    <div class="Workbench-middle">
      <img
          src="@/assets/images/mes.png"
          alt=""
          style="width: 90px; height: 100px"
      />
      <div class="middle-right" @click="handlerStrip(item)">
        <AutoScroll>
          <template v-slot:content>
            <div
                class="right-msg"
                v-for="(item, index) in messagelist"
                :key="index"
            >
              <div class="msg-text">{{ item.msgTitle }} {{ item.msgContent }}</div>
              <div class="mag-time">{{ item.msgPushTime }}</div>
            </div>
          </template>
        </AutoScroll>
      </div>
    </div>
    <!--  订单核查  订单趋势  -->
    <div class="middle-third">
      <div class="middle-box">
        <div class="card-title">
          <img src="@/assets/images/title-card.png" alt=""/>
          <div class="text">订单明细</div>
        </div>
        <div class="stat">
          <div class="stat-left">
            <div class="stat-left-box">
              <div class="stat-left-number">{{ lookInfo.orderTotal || 0 }}</div>
              <div class="stat-left-label">订单总数（条）</div>
              <div class="stat-left-pic"></div>
            </div>
          </div>
          <div class="stat-right">
            <div class="stat-right-box">
              <div class="stat-right-pic"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.inStrikeNum || 0 }}</div>
                <div class="stat-right-label">待核查（条）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic2"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">{{ lookInfo.validNum || 0 }}</div>
                <div class="stat-right-label">有效数据（条）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic3"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">
                  {{ lookInfo.strikeNum || 0 }}
                </div>
                <div class="stat-right-label">已核查（条）</div>
              </div>
            </div>
            <div class="stat-right-box">
              <div class="stat-right-pic pic4"></div>
              <div class="stat-right-content">
                <div class="stat-right-number">
                  {{ lookInfo.inValidNum || 0 }}
                </div>
                <div class="stat-right-label">无效数据（条）</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-box">
        <div class="card-title">
          <img src="@/assets/images/title-card.png" alt=""/>
          <div class="text">订单趋势</div>
        </div>
        <div class="stat">
          <div id="orderCheck" ref="chart"></div>
        </div>
      </div>
    </div>
    <!--  人员概况  -->
    <div>
      <div class="middle-third">
        <div class="middle-box">
          <div class="card-title">
            <img src="@/assets/images/title-card.png" alt=""/>
            <div class="text">人员概况</div>
          </div>
          <div class="stat">
            <div class="stat-left">
              <div class="stat-left-box">
                <div class="stat-left-number">{{ personalInfo.headcount || 0 }}</div>
                <div class="stat-left-label">总人数（人）</div>
                <div class="stat-left-pic"></div>
              </div>
            </div>
            <div class="stat-right">
              <div class="stat-right-box">
                <div class="stat-right-pic"></div>
                <div class="stat-right-content">
                  <div class="stat-right-number">{{ personalInfo.resident || 0}}</div>
                  <div class="stat-right-label">外来人员（人）</div>
                </div>
              </div>
              <div class="stat-right-box">
                <div class="stat-right-pic pic2"></div>
                <div class="stat-right-content">
                  <div class="stat-right-number">{{ personalInfo.headHold|| 0 }}</div>
                  <div class="stat-right-label">持有无人机（台）</div>
                </div>
              </div>
              <div class="stat-right-box">
                <div class="stat-right-pic pic3"></div>
                <div class="stat-right-content">
                  <div class="stat-right-number">
                    {{ personalInfo.censusRegisterPeo|| 0 }}
                  </div>
                  <div class="stat-right-label">户籍人员（人）</div>
                </div>
              </div>
              <div class="stat-right-box">
                <div class="stat-right-pic pic4"></div>
                <div class="stat-right-content">
                  <div class="stat-right-number">
                    {{ personalInfo.headAverageHold || 0}}
                  </div>
                  <div class="stat-right-label">人均持有（台）</div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="middle-box">
          <div class="card-title">
            <img src="@/assets/images/title-card.png" alt=""/>
            <div class="text">重点人员</div>
          </div>
          <div class="stat">
            <div class="stat-left">
              <div class="stat-left-box">
                <div class="stat-left-number">{{ personalInfo.keyPersonnel || 0}}</div>
                <div class="stat-left-label">重点人员（人）</div>
                <div class="stat-left-pic pic1"></div>
              </div>
            </div>
            <div class="stat-right">
              <div class="stat-right-box">
                <div class="stat-right-pic pic5"></div>
                <div class="stat-right-content">
                  <div class="stat-right-number">{{ personalInfo.controlled|| 0 }}</div>
                  <div class="stat-right-label">已管控（人）</div>
                </div>
              </div>
              <div class="stat-right-box">
                <div class="stat-right-pic pic2"></div>
                <div class="stat-right-content">
                  <div class="stat-right-number">{{ personalInfo.keyHold|| 0 }}</div>
                  <div class="stat-right-label">持有无人机（台）</div>
                </div>
              </div>
              <div class="stat-right-box">
                <div class="stat-right-pic pic6"></div>
                <div class="stat-right-content">
                  <div class="stat-right-number">{{ personalInfo.goldieLock|| 0 }}</div>
                  <div class="stat-right-label">待管控（人）</div>
                </div>
              </div>
              <div class="stat-right-box">
                <div class="stat-right-pic pic4"></div>
                <div class="stat-right-content">
                  <div class="stat-right-number">
                    {{ personalInfo.keyAverageHold|| 0 }}
                  </div>
                  <div class="stat-right-label">人均持有（台）</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import AutoScroll from "@/components/Autoscroll/autoscroll.vue";
import {gethistMessagelist} from "@/api/message/message";
import {orderData, orderData12} from "@/api/orderVerification/order";
import * as echarts from "echarts";
import {useRouter} from "vue-router";
import {getLookApi} from "@/api/erp/unit";
const router = useRouter();
const messagelist = ref([]);
const lookInfo = ref({
  orderTotal: 0,
  inStrikeNum: 0,
  validNum: 0,
  strikeNum: 0,
  inValidNum: 0,
});
let total = ref(0);
const loading = ref(false);
let params = ref({
  pageNum: 1,
  pageSize: 10,
});

/*
* 工作台消息点击事件处理
* */
const handlerStrip = (item) => {
  console.log(item)
  router.push({
    path: "/message",
  });
}

// 搜索参数
const getMessagelist = () => {
  loading.value = true;
  gethistMessagelist(params.value).then((res) => {
    messagelist.value = res.data.records;
    total.value = res.data.total;
    loading.value = false;
    console.log("messagelist.value", messagelist.value)
  });
}

// echarts
const chart = ref();
const initChart = () => {
  const myChart = echarts.init(chart.value);
  var option = {
    tooltip: {
      trigger: 'axis',
      showContent: true
    },
    dataset: {
      source: twelveData
    },
    xAxis: {type: 'category'},
    yAxis: {
      name: '单位：条',
      gridIndex: 0,
      type: 'value',
      // axisLabel: {
      //   formatter: '{value}条'
      // }
    },
    grid: {
      top: 55,
      x: 45,
      x2: 35,
      y2: 40
    },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: {focus: 'series'}
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: {focus: 'series'}
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: {focus: 'series'}
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: {focus: 'series'}
      }
    ]
  };
  myChart.setOption(option);
}

/*
* 获取任务分发的下拉数据以及订单最近12个月数据
* */
let twelveData = [];
const getOrderData = async () => {
  await orderData().then((res) => {
    if (res.code === 200) lookInfo.value = res.data;
  })
  await orderData12().then((res) => {
    let year = res.data.map(item => item.key)
    year.unshift('')
    let orderTotal = res.data.map(item => item.value.orderTotal)
    orderTotal.unshift('订单总数')
    let orderNumByMonth = res.data.map(item => item.value.orderNumByMonth)
    orderNumByMonth.unshift('本月订单')
    let strikeNumByMonth = res.data.map(item => item.value.strikeNumByMonth)
    strikeNumByMonth.unshift('本月核查')
    let strikeTotal = res.data.map(item => item.value.strikeTotal)
    strikeTotal.unshift('核查总数')
    twelveData.push(year);
    twelveData.push(orderTotal);
    twelveData.push(orderNumByMonth);
    twelveData.push(strikeNumByMonth);
    twelveData.push(strikeTotal);
    initChart();
  })
}

const personalInfo = ref({})
const getLook = () => {
  getLookApi().then((res) => {
    personalInfo.value = res;
  });
};

onMounted(() => {
  getMessagelist();
  getOrderData();
  getLook();
})

</script>

<style lang="scss" scoped>
.work-container {
  #orderCheck {
    width: 100%;
    height: 250px;
  }

  .home-container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 80px;
    background: url("@/assets/images/bac3.png") no-repeat;
    background-size: 100% 100%;
  }

  .Workbench-middle {
    display: flex;
    background: #ffffff;
    border-radius: 10px;
    height: 130px;
    padding: 15px 40px;

    .middle-right {
      cursor: pointer;
      width: 100%;
      margin-left: 40px;

      .right-msg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
      }
    }
  }

  .middle-third {
    width: 100%;
    height: 266px;
    margin: 10px 0 40px;
    display: flex;
    justify-content: space-between;
  }

  .card-title {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #f6f6f6;

    .text {
      margin-left: 10px;
      font-size: 16px;
      color: #000000;
    }
  }

  .middle-box {
    width: 49%;
  }

  .stat {
    display: flex;
    align-items: center;
    height: 250px;
    background: url("@/assets/images/stat-bgc.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
    color: #ffffff;

    .stat-left {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px dashed #6cabed;
      height: 80%;

      .stat-left-box {
      }

      .stat-left-number {
        text-align: center;
        font-family: DigifaceWide;
        font-size: 36px;
      }

      .stat-left-label {
        text-align: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24px;
        margin: 10px 0 20px 0;
      }

      .stat-left-pic {
        margin-top: 20px;
        margin: 0 auto;
        width: 80px;
        height: 80px;
        background: url("@/assets/images/stat-icon1.png") no-repeat;
      }

      .pic1 {
        background: url("@/assets/images/stat-icon8.png") no-repeat;
      }
    }

    .stat-right {
      width: 70%;
      display: flex;
      flex-wrap: wrap;
      height: 80%;
      padding-left: 60px;
      padding-top: 10px;


      .stat-right-box {
        display: flex;
        margin-right: 50px;
        margin-bottom: 38px;
      }

      .stat-right-pic {
        width: 60px;
        height: 60px;
        background: url("@/assets/images/stat-icon2.png") no-repeat;
        margin-right: 20px;
      }

      .pic2 {
        background: url("@/assets/images/stat-icon3.png") no-repeat;
      }

      .pic3 {
        background: url("@/assets/images/stat-icon4.png") no-repeat;
      }

      .pic4 {
        background: url("@/assets/images/stat-icon5.png") no-repeat;
      }

      .pic5 {
        background: url("@/assets/images/stat-icon6.png") no-repeat;
      }

      .pic6 {
        background: url("@/assets/images/stat-icon7.png") no-repeat;
      }

      .stat-right-number {
        font-family: DigifaceWide;
        font-size: 24px;
        margin-bottom: 8px;
      }

      .stat-right-label {
        font-family: PingFang SC;
        font-size: 16px;
      }
    }
  }

}
</style>